<template>
  <div>
      <el-card class="play-content">
<el-row type="flex" class="row-bg" justify="space-between">
  <el-col :span="3"><div class="grid-content bg-purple" style="backgroundColor:rgb(36,127,252);border-radius:5px">
      <p class="play-card" >0/3</p>
       <div class="paly-date">
           <span>今日打卡</span><br>
           <span>2022-1-18</span>
       </div>
      </div>
      </el-col>
  <el-col :span="7"><div class="grid-content attend-content">
      <p class="attend-count">9</p>
      <p class="attend-month">本月累计出勤</p>
      </div></el-col>
  <el-col :span="3"><div class="grid-content abnormal-content">
       <p class="abnormal-count">13</p>
      <p class="abnormal-card">本月异常打卡</p>
      </div></el-col>
</el-row>
      </el-card>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="less" >
/deep/ .play-content{
    height: 100px;
    margin-top: 20px;
    .row-bg{

   /deep/     .grid-content{
            height: 100px;
            margin-left: -19px;
                .play-card{
                    font-size: 22px;
                    padding-top: 10px;
                    padding-left:25px ;
                    color:#fff;
                    margin-top: -20px;
                     font-weight: 600;

                }
              .paly-date{
                    margin-top: 6px;
                    padding-left: 25px;
                    font-size: 14px;
                    color: #fff;

                }

            }
            .attend-content{
                  padding-top: 8px;
                 margin-top: -10px;
              .attend-count{
                  color: rgb(36,127,252);
                  padding-left: 100px;
                  font-size: 22px;
                  font-weight: 600;
                  margin-bottom: 20px;
              }
              .attend-month{
                  padding-left: 100px;
                  margin-top: -5px;
                  font-size: 14px;
              }
            }
            .abnormal-content{
             margin-top:-11px;
             .abnormal-count{
                 color: rgb(255,73,66);
                  font-size: 22px;
                  font-weight: 600;
                  padding-top: 10px;
                  margin-bottom: 20px;
             }
             .abnormal-card{
                  margin-top: -5px;
                  font-size: 14px;
             }
            }
        }

    }

</style>
